<template>
  <div class="rightMod">
    <div class="one">
      <stitle :bg="bg" text="环境监测管控设备统计" :type="0"/>
      <div class="container">
        <device :bg="bg1" :devicedata="wastewater" />
        <device :bg="bg2" :devicedata="fireman" />
        <device :bg="bg3" :devicedata="wastegas" />
        <device :bg="bg4" :devicedata="firegas" />
      </div>
    </div>
    <div class="two">
      <stitle :bg="bg" text="当日环保设备告警次数" :type="0"/>
      <equTable :tabledata="alarm" :tablebg="tablebg" />
    </div>
    <div class="three">
      <stitle :bg="bg" text="告警类型" :type="0"/>
      <div id="warnType"></div>
    </div>
    <placepic />
  </div>
</template>
<script>
import * as echarts from "echarts";
import stitle from "@/components/common/stitle";
import device from "@/components/common/device";
import equTable from "@/components/common/EquAlarm";
import placepic from "@/components/envMonitoring/placepic/main";
export default {
  name: "envright",
  components: {
    stitle,
    device,
    equTable,
    placepic
  },
  mounted() {
    this.showdata();
  },
  data() {
    return {
      // 标题
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      // 右一图
      bg1: require("@/assets/images/envMon/wastewater.png"),
      bg2: require("@/assets/images/envMon/wastegas.png"),
      bg3: require("@/assets/images/envMon/firegas.png"),
      bg4: require("@/assets/images/envMon/fireman.png"),
      //右二
      tablebg: require("@/assets/images/envMon/palce.png"),
      //废水
      wastewater: {
        name: "废水",
        common: 160,
        service: 20,
        fault: 40,
        total: 220,
      }, //消防
      fireman: {
        name: "废气",
        common: 160,
        service: 20,
        fault: 40,
        total: 220,
      }, //废气
      wastegas: {
        name: "可燃气体",
        common: 160,
        service: 20,
        fault: 40,
        total: 220,
      }, //可燃气体
      firegas: {
        name: "消防",
        common: 160,
        service: 20,
        fault: 40,
        total: 220,
      },
      //右二告警
      alarm: [
        {
          type: "废水",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
        {
          type: "废水",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
        {
          type: "废水",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
        {
          type: "废水",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
        {
          type: "废水",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
        {
          type: "废水",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
        {
          type: "可燃气体",
          stations: "监测点一",
          time: "1/21 7时",
          value: 60,
        },
      ],
      edata: [
        { value: 40, name: "废水" },
        { value: 20, name: "废气" },
        { value: 20, name: "消防" },
        { value: 20, name: "可燃气体" },
      ],
      total:120
    };
  },
  methods: {
    //右三echats
    showdata() {
      const _echarts = this.$echarts.init(
        document.getElementById("warnType")
      );
      const option = {
        legend: {
          itemWidth: 15,
          itemHeight: 10,
          bottom: "10px",
          left:"center",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        color: ["#F9D406", "#06FDFA", "#36E879", "#FE6C00",],
        series: [
          {
            type: "pie",
            radius: [30, 34],
            center: ["50%", "40%"],
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 14,
                  },
                },
              },
            },
            data: this.edata,
          },
          {
            type: "pie",
            radius: [30, 45],
            center: ["50%", "40%"],
            label: {
              show: true,
              position: "center",
              formatter: `{a|${this.total}} \n {b|总览}`,
              rich: {
                a: {
                  fontSize: 20,
                  height: 30,
                  color: "#FFDE00",
                },
                b: {
                  fontSize: 14,
                  color: "#fff",
                },
              },
            },
            data: this.edata,
          },
        ],
      };
      _echarts.setOption(option);
    },
  },
};
</script>
<style scoped>
.rightMod {
  width: 370px;
  height: 730px;
  padding-right: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  /* 字体样式 */
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.one,
.two,
.three {
  width: 100%;
  height: 220px;
}
.container {
  width: 100%;
  height: 170px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.container > div {
  width: 49%;
  height: 49%;
  display: flex;
  justify-content: space-around;
}
#warnType {
  width: 80%;
  height: 170px;
  margin: 0 auto;
}
</style>